import { type FC, useMemo } from 'react';
import { View, Text } from 'react-native';
import Feather from '@expo/vector-icons/Feather';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { useSafeState, useMemoizedFn } from 'ahooks';
import { TouchableWithoutFeedback, TouchableOpacity } from 'react-native';
import { Space, message } from '@/components';
import { formatDate } from '@/utils/helper';
import { useDetails } from '../hooks';
import MoreMenu from '@/components/MoreMenu';
import FollowBtn from '../followBtn';
import styles from './styles';

type HeaderProps = {

}

const Header: FC<HeaderProps> = () => {
  const { creator, createAt } = useDetails();
  const [followed, setFollowed] = useSafeState(false);

  const onFollowPress = useMemoizedFn(() => {
    setFollowed(!followed);
  });

  const onFavorite = useMemoizedFn(async () => {
    message.success('Favorite post successfully.');
    return true;
  });

  const menuItems = useMemo(() => {
    return [
      {
        key: 'favorite',
        title: 'Favorite',
        onPress: onFavorite,
        icon: <FontAwesome name="star-o" />
      }
    ]
  },[onFavorite]);

  return (
    <TouchableWithoutFeedback>
      <View style={styles.header}>
        <Space
          size={1}
          direction="vertical"
          style={styles.left}
        >
          <Text
            numberOfLines={1}
            style={styles.nickName}
          >
            {creator.nickName}
          </Text>
          <Text style={styles.createAt}>
            {formatDate(createAt * 1000)}
          </Text>
        </Space>
        <Space
          size={6}
          style={styles.right}
        >
          <FollowBtn
            followed={followed}
            onFollowPress={onFollowPress}
          />
          <MoreMenu items={menuItems}>
            <TouchableOpacity
              style={styles.moreBtn}
            >
              <Feather
                size={20}
                color="#999"
                name="more-vertical"
              />
            </TouchableOpacity>
          </MoreMenu>
        </Space>
      </View>
    </TouchableWithoutFeedback>
  );
}

export default Header;